<template>
  <div>
    <a-table
      :columns="columns"
      :dataSource="data"
      :pagination="false"
      :loading="memberLoading"
    >
      <template v-for="(col, i) in ['licencetype', 'licenceno']" :slot="col" slot-scope="text, record">
        <template v-if="record.editable">
          <a-input
            :key="col"
            v-if="col === 'licenceno'"
            :value="text"
            :placeholder="columns[i].title"
            @change="e => handleChange(e.target.value, record.key, col)"
          />
          <a-select
            :key="col"
            v-else
            style="width: 100%"
            :default-value="text"
            :placeholder="columns[i].title"
            @change="e => handleChange(e, record.key, col)"
          >
            <a-select-option v-for="item in licenceTypeData" :key="item.id" :value="item.id">{{item.label}}</a-select-option>
          </a-select>
        </template>
        <template v-else>
          <template v-if="col === 'licencetype'">
            {{ licenceTypeData.find(f => f.id == text).label}}
          </template>
          <template v-else>
            {{ text }}
          </template>
        </template>
      </template>
      <template slot="operation" slot-scope="text, record">
        <template v-if="record.editable">
          <span class="click" v-if="record.isNew">
            <a @click="saveRow(record)">添加</a>
            <a-divider type="vertical" />
            <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
              <a>删除</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a class="click" @click="saveRow(record)">保存</a>
            <a-divider type="vertical" />
            <a @click="cancel(record.key)">取消</a>
          </span>
        </template>
        <span v-else>
          <a @click="toggle(record.key)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </template>
    </a-table>
    <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMember">新增</a-button>
  </div>
</template>

<script>
  import {getLicencelistInfo} from '@/api/organization';
export default {
  name: 'LicenceListForm2',
  props: {
  },
  data () {
    return {
      licenceTypeData:[{id: 1, label: '域名根服务器运行机构许可证'},{id:2,label:'域名注册管理机构许可证'},{id:3, label: '域名注册服务机构许可证'},{id:4,label:'增值电信业务经营许可证'},{id:5,label:'否'}],
      memberLoading: false,
      // table
      columns: [
        {
          title: '许可证类',
          dataIndex: 'licencetype',
          key: 'licencetype',
          width: '40%',
          scopedSlots: { customRender: 'licencetype' }
        },
        {
          title: '许可证号',
          dataIndex: 'licenceno',
          key: 'licenceno',
          width: '20%',
          scopedSlots: { customRender: 'licenceno' }
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: [],
      id: ''
    }
  },
  mounted() {
  },
  methods: {
    getDetail(obj) {
      const {type, value} = obj
      if (type === 'view' || type === 'edit') {
        if (type === 'view') {
          this.disabled = true;
        } else if (type === 'edit') {
          this.disabled = false;
        }
        let that = this
        this.getInfo(JSON.parse(value).gnrlid).then(res =>{
          res.forEach(v => v['key'] = v.id)
          that.$nextTick(()=>{
            that.id = res.id
            that.data = res
          });
        })
      } else if (type === 'add') {
        this.disabled = false;
        this.data = [];
        this.id = '';
      }
    },
    getInfo(gnrlid){
      return new Promise(((resolve, reject) => {
        getLicencelistInfo(gnrlid).then(res => {
          resolve(res.data)
        });
      }))
    },
    newMember () {
      const length = this.data.length
      this.data.push({
        key: length === 0 ? '1' : (parseInt(this.data[length - 1].key) + 1).toString(),
        // licencetype: '',
        licenceno: '',
        editable: true,
        isNew: true
      })
    },
    handleChange (value, key, column) {
      // debugger
      const newData = [...this.data]
      const target = newData.find(item => key === item.key)
      if (target) {
        target[column] = value
        this.data = newData
      }

    },
    remove (key) {
      const newData = this.data.filter(item => item.key !== key)
      this.data = newData
    },
    saveRow (record) {
      this.memberLoading = true
      const { key, licencetype, licenceno} = record
      if (!licencetype && !licenceno) {
        this.memberLoading = false;
        this.$message.error('请填写完整信息。')
        return
      }
      const target = this.data.find(item => item.key === key)
      target.editable = false
      target.isNew = false
      this.memberLoading = false
    },
    toggle (key) {
      // 强制更新数据
      this.$forceUpdate();
      const target = this.data.find(item => item.key === key)
      target._originalData = { ...target }
      target.editable = !target.editable
    },
    getRowByKey (key, newData) {
      const data = this.data
      return (newData || data).find(item => item.key === key)
    },
    cancel (key) {
      const target = this.data.find(item => item.key === key)
      Object.keys(target).forEach(key => {
        if (key != '_originalData') {
          target[key] = target._originalData[key];
        }
      })
      target._originalData = undefined
    },
  }
}
</script>

<style lang="less" scoped>
.click {
  a{
    cursor: pointer;
  }
}
</style>
